<template>
    <div class="book-chater">
        <!-- 头部 -->
        <div class="book-chater-top">
            <div 
                class="goback"
                @click="goback()">
                <i class="iconfont icon-fanhui"></i>
                返回
            </div>
            <div 
                class="goback"
                @click="gohome()">
                返回首页
            </div>
        </div>
        <!-- 加载动画 -->
        <div class="loading" v-if="isLoadingChater || isLoadingBook">
            <img src="@/assets/img/loading.gif" alt="">
        </div>
        <div class="chaters" v-if="!isLoadingBook">
            <div class="chaters-top">
                <img :src="bookData.cover" alt="">
                <div class="text">
                    <div class="title">{{bookData.title}}</div>
                    <div class="author">{{bookData.author}}</div>
                </div>
            </div>
        </div>
        <!-- 章节数量 -->
        <div class="chaterNum" v-if="!isLoadingChater && !isLoadingBook">
            共{{chaterList.length}}章
        </div>
        <!-- 显示章节 -->
        <ul v-if="!isLoadingChater && !isLoadingBook">
            <li
                v-for="item,index in chaterList"
                :key="index"
                @click='gotoRead(id,item.uuid)'>
                <div class="no-c" v-if="item.grade == 1">{{item.title}}</div>
                <div 
                    class="c" 
                    v-if="item.grade == 2">
                    {{item.title}}
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'bookChater',
    data() {
        return {
            isLoadingChater: true,
            isLoadingBook: true,
            chaterList: [],
            bookData: {},
            id: null,
        }
    },
    methods: {
        loadingChater() {
            if(this.$route.params.id) {
                this.id = this.$route.params.id;
            }
            console.log('gogog');
            // axios.get('./chater.json')
            axios.get('https://apis.netstart.cn/yunyuedu/reader/book/info.json?source_uuid='+this.id)
                .then((success)=>{
                    this.chaterList = success.data.catalog;
                    console.log('this.c',this.chaterList);
                    this.$store.dispatch('reading/setBidAsync',this.id);
                    this.$store.dispatch('reading/setChaterListAsync',{list:this.chaterList});
                    this.isLoadingChater = false;
                })
                .catch((err)=>{
                    console.log(err);
                })
        },
        loadingBook() {
            if(this.$route.params.id) {
                this.id = this.$route.params.id;
            }
            axios.get('https://apis.netstart.cn/yunyuedu/book/info.json?sourceUuid='+this.id)
                .then((success)=>{
                    console.log('data',success);
                    this.bookData = success.data.book;
                    this.isLoadingBook = false
                })
                .catch((err)=>{
                    console.log(err);
                })
        },
        goback() {
            this.$router.go(-1);
        },
        gohome() {
            this.$router.push('/');
        },
        gotoRead(id,uuid) {
            this.$router.push('/book-text/'+id+'/'+uuid+'/m');
        }
    },
    created() {
        this.loadingChater();
        this.loadingBook();
    }
}
</script>

<style lang="scss" scoped>
.book-chater {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: scroll;
}
.book-chater-top {
    position: sticky;
    top: 0;
    height: 50px;
    padding: 0 15px;
    font-size: 22px;
    box-sizing: border-box;
    font-family: oppo-l;
    font-weight: bold;
    background-color: white;
    border-bottom: 1px #ccc solid;
    display: flex;
    justify-content: space-between;
    & > div {
        line-height: 50px;
    }
}

.loading {
    position: fixed;
    width: 100%;
    height: 100%;
    img {
        position: absolute;
        width: 100px;
        height: 100px;
        top: 50%;
        left: 50%;
        margin-left: -50px;
        margin-top: -50px;
    }
}

.chaters {
    padding: 15px;
    .chaters-top {
        display: flex;
    }
    
    img {
        width: 100px;
        height: 150px;
        margin-right: 20px;
    }
    .text {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        .title {
            font-size: 20px;
            font-family: oppo-l;
            font-weight: bold;
        }
        .author {
            font-size: 16px;
        }
    }
}
.chaterNum {
    padding:4px 15px ;
    font-size: 16px;
}
ul {
    margin: 10px 0;
    font-size: 16px;
    .c {
        padding: 10px;
        margin: 2px 10px;
        border-bottom: 1px dotted #ccc;
    }
    .no-c {
        padding: 10px;
        font-size: 14px;
        background-color: #eee;
    }
}
</style>